<script setup lang="ts">
import { getUserDetail } from "@/api/user";
import {
  PlusDescriptions,
  RecordType,
  PlusDialogForm,
  type FieldValues,
  type PlusColumn
} from "plus-pro-components";
import "plus-pro-components/es/components/descriptions/style/css";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { tabMap } from "./list";
import { setUser } from "@/api/user";
import { ElMessage } from "element-plus";
import { deviceDetection } from "@pureadmin/utils";
const isMobile = deviceDetection();

defineOptions({
  name: "UserDetail"
});
import { useMenu } from "@/utils/power";
const tabPowers = [
  "groupData",
  "idAuth",
  "userFlow",
  "chargeList",
  "withdrawList",
  "financeOrder"
];
const power = useMenu([
  ...tabPowers,
  "financeEdit",
  "financeDelete",
  "editUserInfo"
]);

const list = computed(() => {
  return tabPowers
    .filter(item => {
      return power.value[item];
    })
    .map(item => tabMap[item]);
});

const {
  groupData,
  idAuth,
  userFlow,
  chargeList,
  withdrawList,
  financeOrder,
  financeEdit,
  financeDelete
} = power.value;

const route = useRoute();
const userId = Number(route.query.id);

const descColumns: PlusColumn[] = [
  {
    label: "用户ID",
    width: 120,
    prop: "id",
    valueType: "copy"
  },
  {
    label: "账号",
    width: 120,
    prop: "account",
    valueType: "copy"
  },
  {
    label: "昵称",
    width: 120,
    prop: "nickname",
    valueType: "copy"
  },
  {
    label: "余额",
    width: 120,
    prop: "money",
    valueType: "text"
  },
  {
    label: "收益",
    width: 120,
    prop: "score",
    valueType: "text"
  },
  {
    label: "积分",
    width: 120,
    prop: "integral",
    valueType: "text"
  },
  {
    label: "等级",
    width: 120,
    prop: "level",
    valueType: "text"
  },
  {
    label: "显示等级",
    width: 120,
    prop: "show_level",
    valueType: "text"
  },
  {
    label: "状态",
    width: 120,
    prop: "status",
    valueType: "text",
    formatter: row => {
      return row === "normal" ? "正常" : "异常";
    }
  },
  {
    label: "合伙人",
    width: 120,
    prop: "starrating",
    valueType: "text",
    formatter: row => {
      return row === 0 ? "不是" : "是合伙人";
    }
  },
  {
    label: "邀请码",
    width: 120,
    prop: "usercode",
    valueType: "copy"
  },
  {
    label: "直推人数",
    width: 120,
    prop: "ztnum",
    valueType: "text"
  },
  {
    label: "有效直推人数",
    width: 120,
    prop: "yxztnum",
    valueType: "text"
  },
  {
    label: "团队人数",
    width: 120,
    prop: "teamnum",
    valueType: "text"
  },
  {
    label: "有效团队人数",
    width: 120,
    prop: "yxteamnum",
    valueType: "text"
  },
  {
    label: "静态释放",
    width: 120,
    prop: "jtsfkg",
    valueType: "text",
    formatter: row => {
      return row === 0 ? "关闭" : "开启";
    }
  },
  {
    label: "姓名",
    width: 120,
    prop: "realname",
    valueType: "text"
  },
  {
    label: "身份证号",
    width: 120,
    prop: "cardid",
    valueType: "text"
  },
  {
    label: "权重值",
    width: 120,
    prop: "weight",
    valueType: "text"
  }
];
const info = ref<RecordType>({});

const loadUserDetail = () => {
  getUserDetail(userId)
    .then(res => {
      info.value = res.data;
    })
    .catch(err => {
      console.log(
        "%c[ err ]-111",
        "font-size:13px; background:pink; color:#bf2c9f;",
        err
      );
    });
};
loadUserDetail();

const selected = ref(0);

const rules = {};
const formColumns: PlusColumn[] = [
  {
    label: "余额",
    prop: "money",
    valueType: "input"
  },
  {
    label: "收益",
    prop: "score",
    valueType: "input"
  },
  {
    label: "是否扣除优惠点",
    prop: "isWeight",
    valueType: "select",
    options: [
      {
        label: "否",
        value: 0
      },
      {
        label: "是",
        value: 1
      }
    ]
  },
  {
    label: "等级",
    prop: "level",
    valueType: "select",
    options: [
      {
        label: "普通用户",
        value: 0
      },
      {
        label: "VIP1",
        value: 1
      },
      {
        label: "VIP2",
        value: 2
      },
      {
        label: "VIP3",
        value: 3
      },
      {
        label: "VIP4",
        value: 4
      },
      {
        label: "VIP5",
        value: 5
      },
      {
        label: "VIP6",
        value: 6
      },
      {
        label: "VIP7",
        value: 7
      }
    ]
  },
  {
    label: "显示等级",
    prop: "showLevel",
    valueType: "select",
    options: [
      {
        label: "普通用户",
        value: 0
      },
      {
        label: "VIP1",
        value: 1
      },
      {
        label: "VIP2",
        value: 2
      },
      {
        label: "VIP3",
        value: 3
      },
      {
        label: "VIP4",
        value: 4
      },
      {
        label: "VIP5",
        value: 5
      },
      {
        label: "VIP6",
        value: 6
      },
      {
        label: "VIP7",
        value: 7
      }
    ]
  },
  {
    label: "是否合伙人",
    prop: "starrating",
    valueType: "select",
    options: [
      {
        label: "普通用户",
        value: 0
      },
      {
        label: "合伙人",
        value: 1
      }
    ]
  },
  {
    label: "是否固定等级",
    prop: "levelAdmin",
    valueType: "select",
    options: [
      {
        label: "不固定",
        value: "0"
      },
      {
        label: "固定",
        value: "1"
      }
    ]
  },
  {
    label: "用户状态",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "启用",
        value: "normal"
      },
      {
        label: "禁用",
        value: "hidden"
      }
    ]
  },
  {
    label: "静态释放",
    prop: "jtsfkg",
    valueType: "select",
    options: [
      {
        label: "关闭",
        value: 0
      },
      {
        label: "开启",
        value: 1
      }
    ]
  }
];
const visible = ref(false);
const values = ref({});
const confirmLoading = ref(false);
function editUserInfo() {
  const row = info.value;
  console.log(
    "%crow===编辑>>>: ",
    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
    row
  );
  values.value = {
    userId: row.id,
    money: row.money,
    score: row.score,
    level: row.level,
    starrating: row.starrating,
    status: row.status,
    levelAdmin: row.level_admin,
    showLevel: row.show_level,
    jtsfkg: row.jtsfkg,
    isWeight: 1
  };
  visible.value = true;
}

const handleEditSubmit = async value => {
  const updatedValues = { ...values.value };
  console.log("updatedValues", updatedValues);

  confirmLoading.value = true;
  try {
    const res = await setUser(updatedValues);
    visible.value = false;
    confirmLoading.value = false;
    // formRef.value?.formInstance?.resetFields();
    ElMessage.success("编辑成功");
    loadUserDetail();
  } catch (error) {
    confirmLoading.value = false;
    console.log(error, "error");
  }
};

const formRef = ref();
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>用户详情</h3>
        </template>
        <template v-if="power.editUserInfo" #extra>
          <div class="flex flex-row items-end justify-end">
            <el-button type="primary" @click="editUserInfo">
              编辑用户信息
            </el-button>
          </div>
        </template>
      </ElPageHeader>
    </template>
    <PlusDescriptions :columns="descColumns" :column="2" :data="info" />
    <PlusDialogForm
      ref="formRef"
      v-model:visible="visible"
      v-model="values"
      :form="{ columns: formColumns, rules, labelWidth: 120 }"
      :dialog="{ confirmLoading, width: isMobile ? '80%' : '40%' }"
      title="编辑用户信息"
      @confirm="handleEditSubmit"
    />
    <template #footer>
      <ElTabs v-model="selected">
        <ElTabPane
          v-for="(item, index) in list"
          :key="index"
          :name="index"
          :lazy="true"
          :label="item.title"
        >
          <component
            :is="item.component"
            v-if="selected == index"
            :userId="userId"
            :financeDelete="power.financeDelete"
            :financeEdit="power.financeEdit"
          />
        </ElTabPane>
      </ElTabs>
    </template>
  </ElCard>
</template>

<style scoped></style>
